<template>
    <div class="page-container">
        <div style="display: flex">
            <div style="padding-right: 10px; cursor: pointer" @click="handleReturn">
                <el-icon>
                    <ArrowLeftBold style="margin-top: 18px" />
                </el-icon>
            </div>
            <div class="page-title">质量检验表</div>
        </div>
        <!-- 查询表单区域 -->
        <div class="form-container">
            <el-form :model="formModel" ref="queryForm" label-width="100px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="子公司" prop="subsidiary">
                            <xcmg-select v-model="formModel.subsidiary" placeholder="请选择子公司" clearable>
                                <xcmg-option v-for="item in subsidiaryOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </xcmg-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item class="form-action" label-width="0">
                            <xcmg-button stoke @click="handleSearch">查询</xcmg-button>
                            <xcmg-button @click="resetForm" class="action-button-spacer">重置</xcmg-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-row class="row-margin-top" style="background-color: #fff">
            <el-col :span="12">
                <div style="position: relative;">
                    <div class="chartTiTle">问题原因统计图</div>
                    <div class="chartImage"><img class="chartImg" src="@/assets/images/droplet.png" alt="" /></div>
                    <div class="datePicker"><el-date-picker v-model="value1" type="monthrange" range-separator="-"
                            start-placeholder="开始月份" end-placeholder="结束月份" /></div>
                </div>
                <div ref="problemReasonChart" class="chart-item"></div>
            </el-col>
            <el-col :span="12">
                <div style="position: relative;">
                    <div class="chartTiTle">整改完成统计表</div>
                    <div class="chartImage"><img class="chartImg" src="@/assets/images/droplet.png" alt="" /></div>
                    <div class="datePicker"><el-date-picker v-model="value2" type="monthrange" range-separator="-"
                            start-placeholder="开始月份" end-placeholder="结束月份" /></div>
                </div>
                <div ref="rectificationChart" class="chart-item"></div>
            </el-col>
        </el-row>
        <el-row class="row-margin-top" style="background-color: #fff">
            <el-col :span="12">
                <div style="position: relative;">
                    <div class="chartTiTle">物料问题原因</div>
                    <div class="chartImage"><img class="chartImg" src="@/assets/images/droplet.png" alt="" /></div>
                    <div class="datePicker"><el-date-picker v-model="value3" type="daterange" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" /></div>
                </div>
                <div ref="questionPieChart" class="chart-item"></div>
            </el-col>
            <el-col :span="12">
                <div style="position: relative;">
                    <div class="chartTiTle">物料问题趋势</div>
                    <div class="chartImage"><img class="chartImg" src="@/assets/images/droplet.png" alt="" /></div>
                    <div class="datePicker"><el-date-picker v-model="value4" type="daterange" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" /></div>
                </div>
                <div ref="typePieChart" class="chart-item"></div>
            </el-col>
        </el-row>
        <el-row class="row-margin-top" style="background-color: #fff">
            <el-col :span="12">
                <div style="position: relative;">
                    <div class="chartTiTle">物料质量统计</div>
                    <div class="chartImage"><img class="chartImg" src="@/assets/images/droplet.png" alt="" /></div>
                    <div class="datePicker"><el-date-picker v-model="value5" type="daterange" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" /></div>
                </div>
                <div ref="materialQualityChart" class="chart-item"></div>
            </el-col>
            <el-col :span="12">
                <div style="position: relative;">
                    <div class="chartTiTle">新增物料状态占比图</div>
                    <div class="chartImage"><img class="chartImg" src="@/assets/images/droplet.png" alt="" /></div>
                    <div class="datePicker"><el-date-picker v-model="value6" type="daterange" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" /></div>
                </div>
                <div ref="newMaterialStatusChart" class="chart-item"></div>
            </el-col>
        </el-row>
        <el-row class="row-margin-top" style="background-color: #fff">
            <el-col :span="24">
                <div style="position: relative;">
                    <div class="chartTiTle">部门物料质量统计</div>
                    <div class="chartImage"><img class="chartImg" src="@/assets/images/droplet.png" alt="" /></div>
                    <div class="datePicker"><el-date-picker v-model="value7" type="daterange" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" /></div>
                </div>
                <div ref="departmentQualityChart" class="chart-item"></div>
            </el-col>
        </el-row>
        <el-row class="row-margin-top" style="background-color: #fff">
            <el-col :span="24">
                <div style="position: relative;">
                    <div class="chartTiTle">人员物料质量统计TOP10</div>
                    <div class="chartImage"><img class="chartImg" src="@/assets/images/droplet.png" alt="" /></div>
                    <div class="datePicker"><el-date-picker v-model="value8" type="daterange" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" /></div>
                </div>
                <div ref="personQualityChart" class="chart-item"></div>
            </el-col>
        </el-row>
    </div>
</template>
  
<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router' // 引入路由
import { ArrowLeftBold } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { ElLoading, ElMessage } from 'element-plus'
import { XcmgMessage } from 'xcmg-components'
import { totalCountGraph, questionClassificationGraph, materialTypeGraph, questionTrend, verificationResult, companyAbnormalGraph } from '@/api/materialQualityTest'

const router = useRouter() // 获取路由实例
const loading = ref(false)

const formModel = reactive({
    date: '',
    subsidiary: '',
    design: '',
    materialType: ''
})

// 选项数据
const subsidiaryOptions = [
    { value: 'sub1', label: '徐州重工' },
    { value: 'sub2', label: '上海机械' },
    { value: 'sub3', label: '北京分公司' }
]

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')
const value6 = ref('')
const value7 = ref('')
const value8 = ref('')


// 图表引用
const problemReasonChart = ref<HTMLElement | null>(null)//问题原因统计图
const rectificationChart = ref<HTMLElement | null>(null)//整改完成统计表
const questionPieChart = ref<HTMLElement | null>(null)//物料问题原因
const typePieChart = ref<HTMLElement | null>(null)//物料问题趋势
const materialQualityChart = ref<HTMLElement | null>(null)//物料质量统计
const newMaterialStatusChart = ref<HTMLElement | null>(null)//新增物料状态占比图
const departmentQualityChart = ref<HTMLElement | null>(null)//部门物料质量统计
const personQualityChart = ref<HTMLElement | null>(null)//人员物料质量统计TOP10

// 图表实例
let problemReasonChartInstance: echarts.ECharts | null = null
let rectificationChartInstance: echarts.ECharts | null = null
let questionPieChartInstance: echarts.ECharts | null = null
let typePieChartInstance: echarts.ECharts | null = null
let materialQualityChartInstance: echarts.ECharts | null = null
let newMaterialStatusChartInstance: echarts.ECharts | null = null
let departmentQualityChartInstance: echarts.ECharts | null = null
let personQualityChartInstance: echarts.ECharts | null = null

// 模拟数据
const problemReasonData = ref({
    categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
    seriesA: [120, 200, 150, 80, 70, 110, 130],
    seriesB: [75, 100, 85, 70, 90, 70, 50],
    seriesC: [85, 60, 45, 60, 80, 80, 60],
    seriesD: [35, 70, 95, 50, 100, 90, 70],
})

const materialQualityData = ref({
    categories: ['钢材', '铝材', '塑料', '橡胶', '电子元件', '玻璃', '陶瓷'],
    seriesA: [85, 120, 95, 70, 110, 80, 60],
})

const departmentQualityData = ref({
    categories: ['生产一部', '生产二部', '生产三部', '采购部', '仓储部', '质检部', '研发部', '生产一部', '生产二部', '生产三部', '采购部', '仓储部', '质检部', '研发部'],
    seriesA: [150, 180, 130, 90, 110, 70, 120, 150, 180, 130, 90, 110, 70, 120],
    seriesB: [120, 150, 110, 75, 90, 60, 100, 120, 150, 110, 75, 90, 60, 100]
})

const personQualityData = ref({
    categories: ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十', '郑十一', '王十二'],
    seriesA: [45, 42, 38, 35, 32, 30, 28, 25, 22, 20],
    seriesB: [40, 38, 35, 32, 30, 28, 25, 22, 20, 18]
})

const newMaterialStatusData = ref([
    { value: 335, name: '正常' },
    { value: 310, name: '轻微问题' },
    { value: 234, name: '一般问题' },
    { value: 135, name: '严重问题' },
    { value: 154, name: '待处理' }
])

// 整改完成数据
const rectificationData = ref({
    months: ['1月', '2月', '3月', '4月', '5月', '6月'],
    completed: [],
    uncompleted: []
})

// 生成随机整改数据
const generateRectificationData = () => {
    const completed = []
    const uncompleted = []

    for (let i = 0; i < 6; i++) {
        let total = Math.random() * 100 // 假设每月总任务量在 0~100 之间
        let completedValue = +(Math.random() * total).toFixed(0) // 已完成部分
        let uncompletedValue = +(total - completedValue).toFixed(0) // 未完成部分

        completed.push(completedValue)
        uncompleted.push(uncompletedValue)
    }

    rectificationData.value.completed = completed
    rectificationData.value.uncompleted = uncompleted
}

// 强调样式（阴影）
const emphasisStyle = {
    itemStyle: {
        shadowBlur: 5,
        shadowColor: 'rgba(0, 0, 0, 0.2)',
        shadowOffsetX: 2,
        shadowOffsetY: 2
    }
}

// 初始化问题原因统计图
const initProblemReasonChart = () => {
    if (!problemReasonChart.value) return

    problemReasonChartInstance = echarts.init(problemReasonChart.value)

    // 计算系列A的总和
    const totalA = problemReasonData.value.seriesA.reduce((a, b) => a + b, 0)

    problemReasonChartInstance.setOption({
        tooltip: {
            trigger: 'axis',
            formatter: function (params: any) {
                let result = params[0].name + '<br/>'
                params.forEach(function (item: any) {
                    if (item.seriesName === '问题数量 A') {
                        const percent = ((item.value / totalA) * 100).toFixed(1)
                        result += item.seriesName + ' : ' + item.value + ' (' + percent + '%)<br/>'
                    } else {
                        result += item.seriesName + ' : ' + item.value + '<br/>'
                    }
                })
                return result
            }
        },
        legend: {
            data: ['物料描述', '物料名称', '其他基础属性', '分类属性'],
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: problemReasonData.value.categories,
        },
        yAxis: {
            type: 'value',
            // name: '数量'
        },
        series: [
            {
                name: '物料描述',
                type: 'bar',
                data: problemReasonData.value.seriesA,
                itemStyle: {
                    color: '#73A0FA'
                }
            },
            {
                name: '物料名称',
                type: 'bar',
                data: problemReasonData.value.seriesB,
                itemStyle: {
                    color: '#73DEB3'
                }
            },
            {
                name: '其他基础属性',
                type: 'bar',
                data: problemReasonData.value.seriesC,
                itemStyle: {
                    color: '#7585A2'
                }
            },
            {
                name: '分类属性',
                type: 'bar',
                data: problemReasonData.value.seriesD,
                itemStyle: {
                    color: '#F7C739'
                }
            },
        ]
    }, true)
}

// 初始化整改完成统计表
const initRectificationChart = () => {
    if (!rectificationChart.value) return

    rectificationChartInstance = echarts.init(rectificationChart.value)
    updateRectificationChart()
}

// 更新整改完成统计图表
const updateRectificationChart = () => {
    if (!rectificationChartInstance) return

    rectificationChartInstance.setOption({
        tooltip: {
            trigger: 'axis',
            // axisPointer: {
            //     type: 'shadow'
            // }
        },
        legend: {
            data: ['已完成', '未完成'],
            // left: '10%',
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: rectificationData.value.months,
            axisLine: { onZero: true },
            splitLine: { show: false },
            splitArea: { show: false }
        },
        yAxis: {
            type: 'value',
            // name: '数量'
        },
        series: [
            {
                name: '已完成',
                type: 'bar',
                stack: '总量',
                emphasis: emphasisStyle,
                data: rectificationData.value.completed,
                itemStyle: {
                    color: '#73DEB3'
                },
                label: {
                    show: true,
                    position: 'inside',
                    fontSize: 10,
                    color: '#000',
                    formatter: function (params: any) {
                        return params.value
                    }
                },
                barWidth: '25%'
            },
            {
                name: '未完成',
                type: 'bar',
                stack: '总量',
                emphasis: emphasisStyle,
                data: rectificationData.value.uncompleted,
                itemStyle: {
                    color: '#73A0FA'
                },
                label: {
                    show: true,
                    position: 'inside',
                    fontSize: 10,
                    color: '#000',
                    formatter: function (params: any) {
                        return params.value
                    }
                },
                barWidth: '25%'
            }
        ]
    }, true)
}

// 初始化问题饼图
const initQuestionPieChart = () => {
    if (!questionPieChart.value) return

    questionPieChartInstance = echarts.init(questionPieChart.value)
    updateQuestionPieChart()
}

// 更新问题饼图数据
const updateQuestionPieChart = () => {
    if (!questionPieChartInstance) return

    questionPieChartInstance.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            bottom: 20
        },
        series: [
            {
                name: '问题类型',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    formatter: '{b}\n{c} ({d}%)',
                    show: true,
                    position: 'outside'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: [
                    { value: 1048, name: '物料描述' },
                    { value: 735, name: '物料名称' },
                    { value: 580, name: '其他基础属性' },
                    { value: 484, name: '分类属性' },
                ]
            }
        ]
    }, true)
}

// 初始化物料类型饼图
const initTypePieChart = () => {
    if (!typePieChart.value) return

    typePieChartInstance = echarts.init(typePieChart.value)
    updateTypePieChart()
}

// 物料类型饼图数据
const updateTypePieChart = () => {
    if (!typePieChartInstance) return

    typePieChartInstance.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            bottom: 20
        },
        series: [
            {
                name: '物料类型',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    formatter: '{b}\n{c} ({d}%)',
                    show: true,
                    position: 'outside'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    }, true)
}

// 初始化物料质量统计
const initMaterialQualityChart = () => {
    if (!materialQualityChart.value) return

    materialQualityChartInstance = echarts.init(materialQualityChart.value)

    // 计算系列A的总和
    const totalA = materialQualityData.value.seriesA.reduce((a, b) => a + b, 0)

    materialQualityChartInstance.setOption({
        tooltip: {
            trigger: 'axis',
            formatter: function (params: any) {
                let result = params[0].name + '<br/>'
                params.forEach(function (item: any) {
                    if (item.seriesName === '合格数量') {
                        const percent = ((item.value / totalA) * 100).toFixed(1)
                        result += item.seriesName + ' : ' + item.value + ' (' + percent + '%)<br/>'
                    } else {
                        result += item.seriesName + ' : ' + item.value + '<br/>'
                    }
                })
                return result
            }
        },
        legend: {
            data: ['合格数量', '不合格数量'],
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: materialQualityData.value.categories
        },
        yAxis: {
            type: 'value',
            // name: '数量'
        },
        series: [
            {
                name: '合格数量',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 10,
                    color: '#000',
                },
                data: materialQualityData.value.seriesA,
                barWidth: '30%',
                itemStyle: {
                    color: '#73A0FA'
                }
            },
        ]
    }, true)
}

// 初始化新增物料状态占比图
const initNewMaterialStatusChart = () => {
    if (!newMaterialStatusChart.value) return

    newMaterialStatusChartInstance = echarts.init(newMaterialStatusChart.value)

    newMaterialStatusChartInstance.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            bottom: 20,
        },
        series: [
            {
                name: '物料状态',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    formatter: '{b}\n{c} ({d}%)',
                    show: true,
                    position: 'outside'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: newMaterialStatusData.value
            }
        ]
    }, true)
}


// 初始化部门物料质量统计图表
const initDepartmentQualityChart = () => {
    if (!departmentQualityChart.value) return

    departmentQualityChartInstance = echarts.init(departmentQualityChart.value)

    // 计算系列A的总和
    const totalA = departmentQualityData.value.seriesA.reduce((a, b) => a + b, 0)

    departmentQualityChartInstance.setOption({
        tooltip: {
            trigger: 'axis',
            formatter: function (params: any) {
                let result = params[0].name + '<br/>'
                params.forEach(function (item: any) {
                    if (item.seriesName === '合格数量') {
                        const percent = ((item.value / totalA) * 100).toFixed(1)
                        result += item.seriesName + ' : ' + item.value + ' (' + percent + '%)<br/>'
                    } else {
                        result += item.seriesName + ' : ' + item.value + '<br/>'
                    }
                })
                return result
            }
        },
        legend: {
            data: ['合格数量', '不合格数量'],
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: departmentQualityData.value.categories,
        },
        yAxis: {
            type: 'value',
            // name: '数量'
        },
        series: [
            {
                name: '合格数量',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 10,
                    color: '#000',
                },
                data: departmentQualityData.value.seriesA,
                barWidth: '30%',
                itemStyle: {
                    color: '#73A0FA'
                }
            },
            {
                name: '不合格数量',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 10,
                    color: '#000',
                },
                data: departmentQualityData.value.seriesB,
                barWidth: '30%',
                itemStyle: {
                    color: '#73DEB3'
                }
            }
        ]
    }, true)
}

// 初始化人员物料质量统计TOP10图表
const initPersonQualityChart = () => {
    if (!personQualityChart.value) return

    personQualityChartInstance = echarts.init(personQualityChart.value)

    // 计算系列A的总和
    const totalA = personQualityData.value.seriesA.reduce((a, b) => a + b, 0)

    personQualityChartInstance.setOption({
        tooltip: {
            trigger: 'axis',
            formatter: function (params: any) {
                let result = params[0].name + '<br/>'
                params.forEach(function (item: any) {
                    if (item.seriesName === '合格数量') {
                        const percent = ((item.value / totalA) * 100).toFixed(1)
                        result += item.seriesName + ' : ' + item.value + ' (' + percent + '%)<br/>'
                    } else {
                        result += item.seriesName + ' : ' + item.value + '<br/>'
                    }
                })
                return result
            }
        },
        legend: {
            data: ['合格数量', '不合格数量'],
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: personQualityData.value.categories
        },
        yAxis: {
            type: 'value',
            // name: '数量'
        },
        series: [
            {
                name: '合格数量',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 10,
                    color: '#000',
                },
                data: personQualityData.value.seriesA,
                barWidth: '30%',
                itemStyle: {
                    color: '#73A0FA'
                }
            },
            {
                name: '不合格数量',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 10,
                    color: '#000',
                },
                data: personQualityData.value.seriesB,
                barWidth: '30%',
                itemStyle: {
                    color: '#73DEB3'
                }
            }
        ]
    }, true)
}




// 响应式调整图表尺寸
const resizeCharts = () => {
    problemReasonChartInstance?.resize()
    rectificationChartInstance?.resize()
    questionPieChartInstance?.resize()
    typePieChartInstance?.resize()
    materialQualityChartInstance?.resize()
    newMaterialStatusChartInstance?.resize()
    departmentQualityChartInstance?.resize()
    personQualityChartInstance?.resize()
}



// 初始化所有图表和数据
const initCharts = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: '加载数据中...',
        background: 'rgba(0, 0, 0, 0.7)'
    })

    try {
        generateRectificationData() // 生成整改数据

        // 初始化所有图表
        initProblemReasonChart()
        initRectificationChart()
        initQuestionPieChart()
        initTypePieChart()
        initMaterialQualityChart()
        initNewMaterialStatusChart()
        initDepartmentQualityChart()
        initPersonQualityChart()

        window.addEventListener('resize', resizeCharts)
    } catch (error) {
        console.error('初始化图表失败:', error)
        ElMessage.error('图表初始化失败')
    } finally {
        loading.close()
    }
}

onMounted(() => {
    // 确保DOM已渲染
    setTimeout(() => {
        initCharts()
    }, 0)
})

onUnmounted(() => {
    problemReasonChartInstance?.dispose()
    rectificationChartInstance?.dispose()
    questionPieChartInstance?.dispose()
    typePieChartInstance?.dispose()
    materialQualityChartInstance?.dispose()
    newMaterialStatusChartInstance?.dispose()
    departmentQualityChartInstance?.dispose()
    personQualityChartInstance?.dispose()

    window.removeEventListener('resize', resizeCharts)
})

const handleSkip = (row: any) => {
    console.log('点击了行数据:', row)

    router.push({
        path: '/qualityTestDetails',
        query: {
            designCategory: row.designCategory,
            materialType: row.materialType,
            materialName: row.materialName
        }
    })
}

// 返回上一页
const handleReturn = () => {
    router.go(-1) // 返回上一页路由
}

// 查询操作
const handleSearch = () => {
    loading.value = true
    // 模拟查询延迟
    setTimeout(() => {
        loading.value = false
        // 这里实际应调用API
        console.log('查询参数:', formModel)
    }, 800)
}

// 重置表单
const resetForm = () => {
    formModel.date = ''
    formModel.subsidiary = ''
    formModel.design = ''
    formModel.materialType = ''
}

const testMonths = (start, end) => {
    // 将字符串转换为 Date 对象
    const startDate = new Date(start)
    const endDate = new Date(end)

    // 计算时间差（毫秒）
    const diffTime = Math.abs(endDate - startDate)
    const diffMonths = diffTime / (1000 * 60 * 60 * 24 * 30) // 粗略按每月30天计算

    if (diffMonths > 6) {
        value1.value = [] // 或者你想保留原值，可以缓存旧值
        XcmgMessage({
            message: '选择的时间范围不能超过六个月',
            type: 'error',
            plain: true,
            showClose: true
        })
    }
}

watch(
    () => value1.value,
    (newVal) => {
        if (!newVal || newVal.length !== 2) return

        const [start, end] = newVal

        testMonths(start, end)
    },
    { deep: true }
)
</script>
  
<style lang="less" scoped>
.page-container {
    background-color: #e9effc;
    padding: 1.25rem;
}

.page-title {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 1rem;
}

.form-container {
    margin-bottom: 1rem;
}

.form-action {
    text-align: right;
}

.action-button-spacer {
    margin-left: 0.5rem;
}

:deep(.el-form-item__content) {
    justify-content: flex-end;
}

.chart-item {
    margin: 0 16px;
    min-width: 450px;
    min-height: 300px;
    background-color: #fff;
    position: relative;
}

.chartTiTle {
    padding-top: 16px;
    margin-left: 20px;
    font-weight: bold;
    font-size: 16px;
}

.chartImage {
    height: 16px;
}

.chartImg {
    margin-bottom: 10px;
    margin-left: 20px;
    width: 29px;
    height: 3px;
}

.datePicker {
    z-index: 2;
    position: absolute;
    top: 14px;
    right: 14px;
}

.row-margin-top {
    margin-top: 20px;
}
</style>